<template>
  <view class="login-container">
    <!-- 角色选择区域 -->
    <view class="role-selection">
      <view class="role-title">请选择您的身份</view>
      <view class="role-options">
        <view class="role-option" :class="{active: selectedRole === '老人'}" @click="selectRole('老人')">
          <image src="/static/images/elderly.png" class="role-icon"></image>
          <text>老人</text>
        </view>
        <view class="role-option" :class="{active: selectedRole === '大学生'}" @click="selectRole('大学生')">
          <image src="/static/images/student.png" class="role-icon"></image>
          <text>大学生</text>
        </view>
      </view>
    </view>

    <!-- 隐私政策弹窗 -->
    <privacy-popup :showPrivacy="showPrivacy" @close="closePrivacyPopup" @agree="handleAgreePrivacy" />


    <!-- 头像区域 - 保持原有函数不变 -->
    <view class="avatar-container">
      <!-- 显示所选头像 -->
      <image v-if="avatarUrl" :src="avatarUrl" mode="aspectFit" class="avatar-image"></image>

      <!-- 选择头像的按钮 -->
      <button v-if="!avatarUrl" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="choose-avatar-btn" id="chooseAvatarBtn">
        选择头像
      </button>

      <!-- 替换头像的按钮 -->
      <button v-if="avatarUrl" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="replace-avatar-btn" id="replaceAvatarBtn">
        替换
      </button>
    </view>

    <!-- 昵称填写表单 -->
    <view class="form-container">
      <view class="input-group">
        <uni-icons type="person" size="20" color="#108edc"></uni-icons>
        <input type="nickname" placeholder="请输入昵称" v-model="nickname" class="nickname-input" placeholder-style="color: #aaa;" />
      </view>
      <button class="submit-btn" @click="onSubmit" :disabled="!formValid" :class="{disabled: !formValid}">
        立即登录
      </button>
    </view>

    <view class="agreement">
      <checkbox-group @change="toggleAgreement">
        <label class="agreement-label">
          <checkbox :checked="hasAgreedPrivacy" color="#108edc" />
          我已阅读并同意<text class="link" @click="showPrivacy = true">《用户协议》</text>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex';
  import PrivacyPopup from '../privacy-popup/privacy-popup.vue';

  export default {
    components: {
      PrivacyPopup
    },
    data() {
      return {
        avatarUrl: '',
        nickname: '',
        showPrivacy: false,
        hasAgreedPrivacy: false,
        selectedRole: '大学生'
      };
    },
    computed: {
      ...mapGetters('my_user', ['getSignature']),
      formValid() {
        return this.nickname && this.selectedRole && this.hasAgreedPrivacy;
      }
    },
    methods: {
      ...mapMutations('my_user', ['updateToken', 'updateAvatarUrl', 'updateNickname', 'updateGender', 'updateRole']),

      // 保持原有的头像选择函数不变
      onChooseAvatar(e) {
        this.avatarUrl = e.detail.avatarUrl;
        console.log('所选头像的临时路径:', this.avatarUrl);
        this.updateAvatarUrl(this.avatarUrl);
      },

      selectRole(role) {
        this.selectedRole = role;
      },

      toggleAgreement(e) {
        this.hasAgreedPrivacy = e.detail.value.length > 0;
      },

      onSubmit() {
        if (!this.nickname) return uni.$showMsg('请输入昵称');
        if (!this.selectedRole) return uni.$showMsg('请选择身份');
        if (!this.hasAgreedPrivacy) return uni.$showMsg('请阅读并同意用户协议');

        this.updateNickname(this.nickname);
        this.updateGender(0);
        this.updateRole(this.selectedRole);
        this.getToken();
      },

      async getToken() {
        uni.showLoading({
          title: '登录中...',
          mask: true
        });

        try {
          const [err, res] = await uni.login();
          if (err || res.errMsg !== 'login:ok') throw new Error('登录失败');

          const query = {
            code: res.code,
            nickName: this.nickname,
            gender: 0,
            perSig: this.getSignature,
            role: this.selectedRole
          };

          const {
            data: res1
          } = await uni.$http.post('/login', {
            query
          });
          if (res1.code !== 1) throw new Error(res1.msg || '登录失败');

          this.updateToken(res1.data);
          uni.$showMsg('登录成功');
          uni.reLaunch({
            url: '/pages/index/index'
          });
        } catch (error) {
          uni.$showMsg(error.message);
        } finally {
          uni.hideLoading();
        }
      },

      closePrivacyPopup() {
        this.showPrivacy = false;
      },

      handleAgreePrivacy() {
        this.hasAgreedPrivacy = true;
        this.showPrivacy = false;
      }
    }
  }
</script>

<style lang="scss">
  .login-container {
    min-height: 100vh;
    padding: 40rpx;
    background: linear-gradient(to bottom, #f7f9fc, #e6f0f9);
    display: flex;
    flex-direction: column;
    align-items: center;

    .role-selection {
      width: 100%;
      margin-bottom: 60rpx;

      .role-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 30rpx;
        text-align: center;
        font-weight: 500;
      }

      .role-options {
        display: flex;
        justify-content: center;
        gap: 40rpx;

        .role-option {
          width: 200rpx;
          height: 200rpx;
          background: #fff;
          border-radius: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
          transition: all 0.3s;

          &.active {
            border: 4rpx solid #108edc;
            box-shadow: 0 4rpx 16rpx rgba(16, 142, 220, 0.3);
          }

          .role-icon {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 20rpx;
          }

          text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }

    .avatar-container {
      position: relative;
      width: 150px;
      height: 150px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;

      /* 优化按钮样式确保可点击 */
      .choose-avatar-btn,
      .replace-avatar-btn {
        position: relative;
        z-index: 10;
        /* 确保按钮在最上层 */
      }

      .choose-avatar-btn {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #108edc;
        color: white;
        border: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease;
        line-height: normal;
        /* 修复微信小程序按钮文字居中问题 */

        &:hover {
          background-color: #0d7bc1;
        }
      }

      .avatar-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      .replace-avatar-btn {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 5px 10px;
        background-color: #108edc;
        color: white;
        border: none;
        border-radius: 15px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease;
        z-index: 10;
        /* 确保按钮在最上层 */
        line-height: normal;
        /* 修复微信小程序按钮文字居中问题 */

        &:hover {
          background-color: #0d7bc1;
        }
      }
    }

    .form-container {
      width: 100%;

      .input-group {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 50rpx;
        padding: 20rpx 30rpx;
        margin-bottom: 40rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

        .nickname-input {
          flex: 1;
          margin-left: 20rpx;
          font-size: 28rpx;
          height: 60rpx;
          color: #333;
        }
      }

      .submit-btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background: linear-gradient(to right, #108edc, #0d7bc1);
        color: #fff;
        border-radius: 50rpx;
        font-size: 32rpx;
        border: none;
        box-shadow: 0 4rpx 16rpx rgba(16, 142, 220, 0.3);
        transition: all 0.3s;

        &.disabled {
          opacity: 0.6;
        }

        &:after {
          border: none;
        }
      }
    }

    .agreement {
      margin-top: 40rpx;
      font-size: 24rpx;
      color: #666;

      .agreement-label {
        display: flex;
        align-items: center;
      }

      .link {
        color: #108edc;
        margin-left: 4rpx;
      }
    }
  }
</style>
